<script setup lang="ts">
import {reactive} from "vue";

let imgs = reactive([
  {
    src: new URL("@/assets/p1.png", import.meta.url).href,
    alt: "img1"
  },
  {
    src: new URL("@/assets/p2.png", import.meta.url).href,
    alt: "img2"
  },
  {
    src: new URL("@/assets/p3.png", import.meta.url).href,
    alt: "img3"
  },
  {
    src: new URL("@/assets/p4.png", import.meta.url).href,
    alt: "img4"
  }
])
</script>

<template>
  <div class="block text-center">
    <span class="demonstration">
      Carousel
    </span>
    <el-carousel motion-blur indicator-position="outside" interval = 500>
      <el-carousel-item v-for="(item, index) in imgs" :key="index">
        <img :src="item.src" :alt="item.alt" class="carousel-image"/>
      </el-carousel-item>
    </el-carousel>
    <el-carousel indicator-position="outside" type="card" interval = 500>
      <el-carousel-item v-for="(item, index) in imgs" :key="index">
        <img :src="item.src" :alt="item.alt" class="carousel-image"/>
      </el-carousel-item>
    </el-carousel>
    <el-carousel motion-blur indicator-position="outside" direction="vertical" trigger="click" interval = 500>
      <el-carousel-item v-for="(item, index) in imgs" :key="index">
        <img :src="item.src" :alt="item.alt" class="carousel-image"/>
      </el-carousel-item>
    </el-carousel>
    <el-carousel motion-blur indicator-position="outside" type="card" direction="vertical" interval = 500>
      <el-carousel-item v-for="(item, index) in imgs" :key="index">
        <img :src="item.src" :alt="item.alt" class="carousel-image"/>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}

.carousel-image {
  object-fit: contain;
  width: 100%;
  height: auto;
  display: block;
  max-height: 400px; /* 可选：限制最大高度 */
}
</style>
